<template>
  <div class="contact-container">
    <div class="contact-content">
      <!-- 标题区域 -->
      <div class="contact-header">
        <h1>联系我</h1>
        <p>如果您有任何问题或合作意向，欢迎通过以下方式与我联系</p>
      </div>

      <!-- 联系信息卡片 -->
<el-card class="contact-card" shadow="hover">
  <el-row class="contact-info">
    <!-- 邮箱信息 -->
    <el-row class="info-item" :gutter="16">
      <el-col :span="4" class="icon-col">
        <div class="icon-wrapper email">
          <el-icon size="24"><Message /></el-icon>
        </div>
      </el-col>
      <el-col :span="20" class="content-col">
        <el-row class="info-content">
          <el-col :span="24">
            <h3>邮箱地址</h3>
          </el-col>
          <el-col :span="24">
            <p>cblx@163.com</p>
          </el-col>
          <el-col :span="24" class="mt-1">
            <el-button type="primary" link @click="sendEmail">发送邮件</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 位置信息 -->
    <el-row class="info-item" :gutter="16">
      <el-col :span="4" class="icon-col">
        <div class="icon-wrapper location">
          <el-icon size="24"><Location /></el-icon>
        </div>
      </el-col>
      <el-col :span="20" class="content-col">
        <el-row class="info-content">
          <el-col :span="24">
            <h3>位置</h3>
          </el-col>
          <el-col :span="24">
            <p>陕西省榆林市高新技术产业园区</p>
          </el-col>
          <el-col :span="24" class="mt-1">
            <el-button type="primary" link @click="viewMap">查看地图</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-row>
</el-card>

      <!-- 分隔线 -->
      <el-divider>
        <el-icon><Promotion /></el-icon>
        快速联系
      </el-divider>

      <!-- 简单表单 -->
      <el-card shadow="never" class="message-card">
        <h3>发送消息</h3>
        <el-form :model="messageForm" :rules="formRules" ref="messageFormRef" label-width="80px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="messageForm.name" placeholder="请输入您的姓名" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="messageForm.email" placeholder="请输入您的邮箱" />
          </el-form-item>
          <el-form-item label="消息" prop="message">
            <el-input 
              v-model="messageForm.message" 
              type="textarea" 
              :rows="3" 
              placeholder="请输入您想发送的消息..." 
            />
          </el-form-item>
          <div class="form-actions">
            <el-button type="primary" @click="handleSendMessage">发送</el-button>
            <el-button @click="resetForm">重置</el-button>
          </div>
        </el-form>
      </el-card>
    </div>

    <!-- 验证码弹窗 -->
    <Captcha
      v-model:visible="showCaptcha"
      code-url="http://ll.cn/api/code/index"
      @confirm="sendMessage"
    />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {
  Message,
  Location,
  Promotion
} from '@element-plus/icons-vue'
import Captcha from '@/components/Captcha.vue'

// 表单数据
const messageForm = reactive({
  name: '',
  email: '',
  message: ''
})

// 表单验证规则
const formRules = reactive({
  name: [
    { required: true, message: '请输入您的姓名', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  message: [
    { required: true, message: '请输入消息内容', trigger: 'blur' }
  ]
})

const messageFormRef = ref()
const showCaptcha = ref(false)

// 发送邮件
const sendEmail = () => {
  window.location.href = 'mailto:cblx@163.com'
}

// 查看地图
const viewMap = () => {
  ElMessage.info('打开地图功能')
  // 实际项目中这里可以打开地图链接或弹出地图对话框
}

// 处理发送消息（先弹出验证码）
const handleSendMessage = () => {
  if (!messageFormRef.value) return
  
  messageFormRef.value.validate((valid) => {
    if (valid) {
      // 表单验证通过，显示验证码弹窗
      showCaptcha.value = true
    } else {
      ElMessage.warning('请完善表单信息')
    }
  })
}

// 验证码验证成功后发送消息
const sendMessage = (captchaCode) => {
  console.log('验证码验证成功:', captchaCode)
  console.log('发送消息内容:', messageForm)
  
  // 模拟发送消息到后端
  setTimeout(() => {
    ElMessage.success('消息发送成功！我会尽快回复您。')
    resetForm()
  }, 500)
}

// 重置表单
const resetForm = () => {
  if (!messageFormRef.value) return
  messageFormRef.value.resetFields()
}
</script>

<style scoped>
.contact-container {
  padding: 40px 20px;
  max-width: 800px;
  margin: 0 auto;
  min-height: 100vh;
}

.contact-content {
  padding: 20px 0;
}

.contact-header {
  text-align: center;
  margin-bottom: 40px;
}

.contact-header h1 {
  margin: 0;
  color: #303133;
  font-size: 32px;
  font-weight: 500;
}

.contact-header p {
  margin: 12px 0 0;
  color: #606266;
  font-size: 16px;
}

.contact-card {
  border-radius: 12px;
  margin-bottom: 30px;
}

.contact-info {
  padding: 10px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.info-item:hover {
  background-color: #f5f7fa;
}

.icon-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
}

.icon-wrapper.email {
  background-color: #f0f7ff;
  color: #409EFF;
}

.icon-wrapper.location {
  background-color: #f9f0ff;
  color: #9254de;
}

.info-content h3 {
  margin: 0 0 8px;
  color: #303133;
  font-size: 18px;
}

.info-content p {
  margin: 0 0 10px;
  color: #606266;
  font-size: 16px;
}

.message-card {
  border-radius: 12px;
}

.message-card h3 {
  margin-top: 0;
  color: #303133;
  font-size: 18px;
  margin-bottom: 20px;
}

:deep(.el-divider__text) {
  display: flex;
  align-items: center;
  color: #409EFF;
  font-size: 15px;
}

:deep(.el-divider__text i) {
  margin-right: 8px;
}


.form-actions {
  display: flex;
  align-items: right;
  justify-self: end;
}
/* 响应式调整 */
@media (max-width: 768px) {
  .contact-container {
    padding: 0;
  }
  
  .contact-header h1 {
    font-size: 1rem;
  }
  
  .contact-header p {
    font-size: 0.85rem;
    margin-bottom: 0;
  }
  
  .info-item {
    flex-direction: row;
    text-align: center;
    padding: 0;
    margin-bottom: 16px;
    border-radius: 12px;
  }
  
  .icon-wrapper {
    margin-right: 0;
    margin-bottom: 12px;
    width: 56px;
    height: 56px;
  }
  
  .info-content h3 {
    font-size: 17px;
    margin-bottom: 4px;
  }
  
  .info-content p {
    font-size: 15px;
    margin-bottom: 10px;
  }
  
  .message-card {
    margin-bottom: 24px;
  }
  
  .message-card h3 {
    font-size: 17px;
    margin:1rem 0 16px 1rem;
  }
  
  .el-form-item {
    margin-bottom: 16px;
  }
  
  .el-form-item__label {
    width: auto !important;
    font-size: 14px !important;
  }
  
  .el-input, .el-textarea {
    width: 100% !important;
  }
  
  .el-form-item__content {
    width: 100% !important;
    
  }
  
  .form-actions {
    margin-left: 0 !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
    width: 100%;
  }
  
  .el-button {
    width: 90% !important;
    margin-top: 8px;
    margin-left: 0;
  }
  
  .el-button:first-child {
    margin-bottom: 12px;
  }
 

}
</style>
  